<!-- 自有产权房添加/修改 -->
<template>
  <a-modal
    :visible="visible"
    :title="`${$isEmpty(data) ? '添加' : '修改'}自有产权房`"
    :okText="$isEmpty(data) ? '添加' : '修改'"
    :confirmLoading="isSubmit"
    :afterClose="handleClose"
    :width="1196"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="spinning">
      <a-form :form="form">
        <a-row :gutter="16" type="flex">
          <a-col :span="12">
            <a-form-item label="成员类别">
              <a-select
                placeholder="请选择成员类别"
                v-decorator="['DetailCategory', { rules: [{ required: true, message: '请选择成员类别' }] }]"
                @change="handleDetailCategoryChange"
              >
                <a-select-option value="保障成员及家庭成员">保障成员及家庭成员</a-select-option>
                <a-select-option value="未纳入保障成员">未纳入保障成员</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="家庭成员姓名">
              <a-select
                placeholder="请选择家庭成员姓名"
                v-decorator="['DetailName', { rules: [{ required: true, message: '请选择家庭成员姓名' }] }]"
                @change="handleDetailNameChange"
              >
                <a-select-option :value="item.name" v-for="(item, index) in peopleOptions" :key="index">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="成员身份证号">
              <a-input
                disabled
                placeholder="请输入成员身份证号"
                v-decorator="['DetailIDcard', { rules: [{ required: true, message: '请选择家庭成员姓名' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12" />
          <a-col :span="12">
            <a-form-item label="自有产权房产权人姓名">
              <a-input
                placeholder="自有产权房产权人姓名"
                v-decorator="['PropertyName', { rules: [{ required: true, message: '请输入自有产权房产权人姓名' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <div class="m-l-10 tips">始终要包含家庭成员,多个姓名使用逗号隔开</div>
          </a-col>
          <a-col :span="12">
            <a-form-item label="自有产权房建筑面积(m²)">
              <a-input-number
                placeholder="请输入自有产权房建筑面积"
                v-decorator="['PropertyArea', { rules: [{ required: true, message: '请输入自有产权房建筑面积(m²)' }] }]"
                :formatter="(value) => `${value}㎡`"
                :parser="(value) => value.replace('㎡', '')"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="自有产权房个人产权面积(m²)">
              <a-input-number
                placeholder="请输入自有产权房个人产权面积"
                v-decorator="[
                  'PropertyOwnArea',
                  { rules: [{ required: true, message: '请输入自有产权房个人产权面积(m²)' }] },
                ]"
                :formatter="(value) => `${value}㎡`"
                :parser="(value) => value.replace('㎡', '')"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="自有产权房证号">
              <a-input
                placeholder="请输自有产权房证证号"
                v-decorator="['PropertyNo', { rules: [{ required: true, message: '请输自有产权房证证号' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="房屋详细地址">
              <a-textarea
                placeholder="请输入房屋详细地址"
                v-decorator="['HouseAddress', { rules: [{ required: true, message: '请输入房屋详细地址' }] }]"
                :auto-size="{ minRows: 1, maxRows: 2 }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="成套情况">
              <a-select
                placeholder="请选择成套情况"
                v-decorator="['IfComplete', { rules: [{ required: true, message: '请选择成套情况' }] }]"
              >
                <a-select-option value="成套">成套</a-select-option>
                <a-select-option value="非成套">非成套</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12" />
          <a-col :span="12">
            <a-form-item label="说明">
              <a-textarea
                placeholder="说明"
                v-decorator="['Remark', { initialValue: '' }]"
                :auto-size="{ minRows: 2, maxRows: 6 }"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <a-modal v-model="houseComparison" title="房产选择" @ok="handleOk" :width="800">
      <a-radio-group v-model="houseComparisonvalue" @change="onChange">
        <!-- {{ realEstates }} -->
        <div v-if="realEstates.length">
          <a-radio v-for="item in realEstates" :key="item.CertificateNo" :style="radioStyle" :value="item">
            <a-card size="small" title="不动产" style="width: 750px">
              <!-- <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>姓名:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ guaranteeName }}</p>
                </a-col>
              </a-row>
              <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>身份证:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ guaranteeidCard }}</p>
                </a-col>
              </a-row> -->
              <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>房产证号:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ item.CertificateNo }}</p>
                </a-col>
              </a-row>
              <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>房屋地址:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ item.Address }}</p>
                </a-col>
              </a-row>
              <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>建筑面积:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ item.ConstructionArea }}</p>
                </a-col>
              </a-row>
              <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>户型:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ item.RoomType }}</p>
                </a-col>
              </a-row>
              <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>所在区域:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ item.Region }}</p>
                </a-col>
              </a-row>
              <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>登记时间:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ item.PropertyDate }}</p>
                </a-col>
              </a-row>
              <!-- <a-row :gutter="24" type="flex"> -->
              <a-table
                rowKey="AcceptanceId"
                :scroll="{ x: true }"
                :columns="columnsSF"
                :data-source="item.QLRLIST"
                :pagination="false"
                size="middle"
              >
                <span slot="area" slot-scope="text">{{ text }}㎡</span>
                <ellipsis slot="address" slot-scope="text" :length="38">{{ text }}</ellipsis>
              </a-table>
              <!-- </a-row> -->
            </a-card>
          </a-radio>
        </div>
        <div v-if="preSaleRegistration.length">
          <a-radio v-for="item in preSaleRegistration" :key="item.BuildingNum" :style="radioStyle" :value="item">
            <a-card size="small" title="预售备案" style="width: 750px">
              <!-- <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>姓名:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ preSaleRegistration.HouseList[0].QLRLIST[0].Name }}</p>
                </a-col>
              </a-row>
              <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>身份证:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ preSaleRegistration.HouseList[0].QLRLIST[0].IdentityNo }}</p>
                </a-col>
              </a-row> -->
              <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>房产证号:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ item.CertificateNo }}</p>
                </a-col>
              </a-row>
              <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>房屋地址:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ item.HouseList[0].Address }}</p>
                </a-col>
              </a-row>
              <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>建筑面积:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ item.HouseList[0].ConstructionArea }}</p>
                </a-col>
              </a-row>
              <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>房屋性质:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ item.HouseList[0].HouseNature }}</p>
                </a-col>
              </a-row>
              <a-table
                rowKey="AcceptanceId"
                :scroll="{ x: true }"
                :columns="columnsXS"
                :data-source="item.HouseList[0].QLRLIST"
                :pagination="false"
                size="middle"
              >
                <span slot="area" slot-scope="text">{{ text }}㎡</span>
                <ellipsis slot="address" slot-scope="text" :length="38">{{ text }}</ellipsis>
              </a-table>
            </a-card>
          </a-radio>
        </div>
        <div v-if="readyForSaleRegistration.length">
          <a-radio v-for="item in readyForSaleRegistration" :key="item.CertificateNo" :style="radioStyle" :value="item">
            <a-card size="small" title="现售备案" style="width: 750px">
              <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>项目姓名:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ item.ProjectTitle }}</p>
                </a-col>
              </a-row>
              <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>房产证号:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ item.CertificateNo }}</p>
                </a-col>
              </a-row>
              <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>房屋地址:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ item.HouseList[0].Address }}</p>
                </a-col>
              </a-row>
              <a-row :gutter="16" type="flex">
                <a-col :span="6">
                  <p>建筑面积:</p>
                </a-col>
                <a-col :span="10">
                  <p>{{ item.HouseList[0].ConstructionArea }}</p>
                </a-col>
              </a-row>
              <a-table
                rowKey="AcceptanceId"
                :scroll="{ x: true }"
                :columns="columnsXS"
                :data-source="item.HouseList[0].QLRLIST"
                :pagination="false"
                size="middle"
              >
                <span slot="area" slot-scope="text">{{ text }}㎡</span>
                <ellipsis slot="address" slot-scope="text" :length="38">{{ text }}</ellipsis>
              </a-table>
            </a-card>
          </a-radio>
        </div>
        <!-- <a-radio v-if="readyForSaleRegistration.CertificateNo" :style="radioStyle" :value="readyForSaleRegistration">
          <a-card size="small" title="现售备案" style="width: 750px">
            <a-row :gutter="16" type="flex">
              <a-col :span="6">
                <p>项目姓名:</p>
              </a-col>
              <a-col :span="10">
                <p>{{ readyForSaleRegistration.ProjectTitle }}</p>
              </a-col>
            </a-row>
            <a-row :gutter="16" type="flex">
              <a-col :span="6">
                <p>姓名:</p>
              </a-col>
              <a-col :span="10">
                <p>{{ readyForSaleRegistration.HouseList[0].QLRLIST[0].Name }}</p>
              </a-col>
            </a-row>
            <a-row :gutter="16" type="flex">
              <a-col :span="6">
                <p>身份证:</p>
              </a-col>
              <a-col :span="10">
                <p>{{ readyForSaleRegistration.HouseList[0].QLRLIST[0].IdentityNo }}</p>
              </a-col>
            </a-row>
            <a-row :gutter="16" type="flex">
              <a-col :span="6">
                <p>房产证号:</p>
              </a-col>
              <a-col :span="10">
                <p>{{ readyForSaleRegistration.CertificateNo }}</p>
              </a-col>
            </a-row>
            <a-row :gutter="16" type="flex">
              <a-col :span="6">
                <p>房屋地址:</p>
              </a-col>
              <a-col :span="10">
                <p>{{ readyForSaleRegistration.HouseList[0].Address }}</p>
              </a-col>
            </a-row>
            <a-row :gutter="16" type="flex">
              <a-col :span="6">
                <p>建筑面积:</p>
              </a-col>
              <a-col :span="10">
                <p>{{ readyForSaleRegistration.HouseList[0].ConstructionArea }}</p>
              </a-col>
            </a-row>
          </a-card>
        </a-radio> -->
      </a-radio-group>
    </a-modal>
  </a-modal>
</template>

<script>
import { getHousesNew, getHousesBA, getHousesXSBA } from '@/api/dataComparison'
import pick from 'lodash.pick'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => {},
    },
    options: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    visible(n) {
      if (n) {
        this.fetchData()
      }
    },
  },
  data() {
    return {
      isSubmit: false,
      houseComparisonvalue: 1,
      realEstates: {},
      readyForSaleRegistration: {},
      preSaleRegistration: {},
      guaranteeName: '',
      guaranteeidCard: '',
      realEstateValue: 1,
      radioStyle: {
        display: 'block',
        lineHeight: '30px',
      },
      houseComparison: false,
      spinning: false,
      form: this.$form.createForm(this, { name: 'ownedProperty' }),
      peopleOptions: [],
      uid: '',
      columnsSF: [
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'ApplicantName',
        },
        {
          title: '证件号码',
          align: 'center',
          dataIndex: 'CertificateNumber',
        },
        {
          title: '权利人类型',
          align: 'center',
          dataIndex: 'QLRLX',
        },
      ],
      columnsXS: [
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'Name',
        },
        {
          title: '证件号码',
          align: 'center',
          dataIndex: 'IdentityNo',
        },
        {
          title: '权利人类型',
          align: 'center',
          dataIndex: 'ApplicantAttribute',
        },
      ],
    }
  },
  methods: {
    fetchData() {
      if (!this.$isEmpty(this.data)) {
        this.$nextTick(() => {
          this.form.setFieldsValue(
            pick(this.data, [
              'DetailCategory',
              'DetailName',
              'DetailIDcard',
              'PropertyName',
              'PropertyArea',
              'PropertyOwnArea',
              'PropertyNo',
              'HouseAddress',
              'IfComplete',
              'Remark',
              'ID',
            ])
          )
        })
        // 修改时，触发家庭成员信息更新
        this.peopleOptions = this.data.DetailCategory === '保障成员及家庭成员' ? this.options[0] : this.options[1]
      }
    },
    onChange(e) {
      console.log('e', e.target.value)
      this.realEstateValue = e.target.value
    },
    handleOk(e) {
      if (this.realEstateValue.QLRLIST) {
        this.form.setFieldsValue({
          PropertyName: this.realEstateValue.QLRLIST.map((applicant) => applicant.ApplicantName).join(', '),
          PropertyArea: this.realEstateValue.ConstructionArea,
          PropertyNo: this.realEstateValue.CertificateNo,
          HouseAddress: this.realEstateValue.Address,
        })
      } else {
        this.form.setFieldsValue({
          PropertyName: this.realEstateValue.HouseList[0].QLRLIST.map((applicant) => applicant.Name).join(', '),
          PropertyArea: this.realEstateValue.HouseList[0].ConstructionArea,
          PropertyNo: this.realEstateValue.CertificateNo,
          HouseAddress: this.realEstateValue.HouseList[0].Address,
        })
      }
      // if (this.realEstateValue == 2) {
      //   this.form.setFieldsValue({
      //     PropertyName: this.preSaleRegistration.HouseList[0].QLRLIST[0].Name,
      //     PropertyArea: this.preSaleRegistration.HouseList[0].ConstructionArea,
      //     PropertyNo: this.preSaleRegistration.CertificateNo,
      //     HouseAddress: this.preSaleRegistration.HouseList[0].Address,
      //   })
      // } else if (this.realEstateValue == 3) {
      //   this.form.setFieldsValue({
      //     PropertyName: this.readyForSaleRegistration.HouseList[0].QLRLIST[0].Name,
      //     PropertyArea: this.readyForSaleRegistration.HouseList[0].ConstructionArea,
      //     PropertyNo: this.readyForSaleRegistration.CertificateNo,
      //     HouseAddress: this.readyForSaleRegistration.HouseList[0].Address,
      //   })
      // }
      this.houseComparison = false
    },
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
      this.form.resetFields()
    },
    handleDetailCategoryChange(e) {
      if (e === '未纳入保障成员') {
        this.peopleOptions = this.options[1]
      } else {
        this.peopleOptions = this.options[0]
      }
      if (this.$isEmpty(this.peopleOptions)) {
        this.$message.error('当前成员类别没有家庭成员数据，请重新选择')
      }
      this.form.setFieldsValue({
        DetailIDcard: '',
        DetailName: '',
      })
    },
    handleDetailNameChange(e) {
      const row = this.peopleOptions.find((item) => item.name === e)
      this.guaranteeName = e
      this.guaranteeidCard = row.idCard
      this.form.setFieldsValue({
        DetailIDcard: row.idCard,
        PropertyName: e,
      })
      this.uid = row.uid
      if (JSON.parse(localStorage.getItem('browserCacheEdit')).isCity) {
        this.spinning = true
        const getHousesNews = getHousesNew({ idcard: row.idCard })
        const getHousesBAs = getHousesBA({ idcard: row.idCard })
        const getHousesXSBAs = getHousesXSBA({ idcard: row.idCard })
        Promise.all([getHousesNews, getHousesBAs, getHousesXSBAs])
          .then((res) => {
            if (res[0].data) {
              this.realEstates = res[0].data
            }
            if (res[1].data) {
              this.preSaleRegistration = res[1].data
            }
            if (res[2].data) {
              this.readyForSaleRegistration = res[2].data
            }
            if (!res[0].data && !res[1].data && !res[2].data) {
              this.$message.info('无房产信息，请自行填写')
            } else {
              this.houseComparison = true
            }
          })
          .finally(() => {
            this.spinning = false
          })
      }
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          const data = Object.assign({}, values, {
            ApplyNo: this.data.ApplyNo || '',
            ID: this.data.ID || '',
            HousesCategory: '自有产权房',
            PublicUnit: this.data.PublicUnit || '',
            PublicArea: this.data.PublicArea || '0',
            UID: this.uid || this.data.ID,
          })
          this.$emit('change', {
            type: this.$isEmpty(this.data) ? 'add' : 'edit',
            data,
          })
          this.handleClose()
        }
      })
    },
    handleCancel() {
      this.handleClose()
    },
  },
}
</script>
<style lang="less" scoped>
.ant-input-number {
  width: 100%;
}
.tips {
  color: rgb(146, 146, 146);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
